<template>
  <input class="badge" :class="`color--${color}`" :placeholder="text">
</input>
</template>

<script setup lang="ts">
withDefaults(defineProps<{ text?: string; color?: 'blue' | 'green' | 'red' }>(), {
  text: 'badge',
  color: 'blue',
});
</script>

<style scoped lang="scss">
.badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 16px;
  color: #fff;
   &::placeholder {
    color: #898989;
  }
  &.color--blue  { color: #409eff; }
  &.color--green { color: #67c23a; }
  &.color--red   { color: #f56c6c; }
}
</style>